{% extends "navigationbar.html" %}
{% load static %}

{% block title %}main-page{% endblock %}

{% block body %}

    <section class="home" id="home">

        <div class="content">
            <h3><span>hi</span> 欢迎来到视讯智疗 </h3>
            <a href="#about" class="btn">了解更多</a>
        </div>

        <img src="{% static 'img/bottom_wave.png' %}" class="wave" alt="">

    </section>

    <section class="about" id="about">

        <h1 class="heading "><span>视讯智疗</span>：你的智能情绪陪伴助手</h1>
        <div class="about-container">
            <div class="image">
                <img src="{% static 'img/简介.webp' %}" alt="">
            </div>

            <div class="content">
                <h3>你的情绪，AI暖心对待</h3>
                <p>
                    视讯智疗利用人工智能与心理学相结合，打造一个完全个性化、智能化的情绪自助平台，为你提供温暖、安全的心理陪伴空间，让AI守护你的每一份情绪！</p>
                <a href="#services" class="btn">功能介绍</a>
            </div>
        </div>


    </section>

    <section class="services" id="services">
        <h1 class="heading"> 我们的<span>功能</span></h1>
        <div class="video-call">

            <div class="image">
                <img src="{% static 'img/video.png' %}" alt="">
            </div>

            <div class="content">
                <h3>心灵治愈助手</h3>
                <p>
                    告别孤独与紧绷，这里永远有位不会疲倦的「云伙伴」，等你随时安心聊。它会实时感知你的情绪波动，用引导式对话帮你释放压力，像整理毛线团般温柔解开纠结心结。
                </p>
                <div class="tips">虚拟朋友，随时陪你聊 <</div>
                <a href="/aichat/"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
            </div>

        </div>

        <div class="self-test">

            <div class="content">
                <h3>心理自测</h3>
                <p>
                    通过科学设计的心理测试题，快速评估你的压力指数和情绪状态，题目会根据你的回答智能调整，像聊天一样自然，告别枯燥问卷，生成易懂的“心理晴雨表”。</p>
                <div class="tips">> 5分钟了解真实的自己</div>
                <a href="/test/"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
            </div>

            <div class="image">
                <img src="{% static "img/test1.png" %}" alt="">
            </div>

        </div>

        <div class="healing-game">

            <div class="image">
                <img src="{% static "img/healing-game.png" %}" alt="">
            </div>

            <div class="content">
                <h3>治愈游戏</h3>
                <p>
                    内置心理小游戏与电子琴互动，零基础也能弹！跟着轻快的旋律轻触琴键，用音乐编织专属的放松时刻，烦恼像泡泡一样被戳破！</p>
                <div class="tips">手指动一动，压力退退退 <</div>
                <a href="/game/"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
            </div>

        </div>

        <div class="tree-hole">

            <div class="content">
                <h3>心理树洞</h3>
                <p>
                    随手记录开心、委屈和迷茫，连AI也不会偷看.自动标记每条记录的心情标签，生成月度情绪曲线图，见证你的成长轨迹。</p>
                <div class="tips">> 这里只有你和月光</div>
                <a href="/treehole/"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
            </div>

            <div class="image">
                <img src="{% static "img/tree-hole.png" %}" alt="">
            </div>

        </div>
    </section>

{% endblock %}

{% block script %}

    <script src="{% static "js/main-page.js" %}"></script>

{% endblock %}